<html lang="en">
<head>

    <link href="/static/css/css/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/css/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/css/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/css/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" href="/static/css/amazeui.datatables.min.css"/>
    <link rel="stylesheet" href="/static/css/cost-form.css">
    <link rel="stylesheet" href="/static/css/amazeui.min.css">
    <link rel="stylesheet" href="/static/css/app.css">
    <link rel="stylesheet" href="/static/css/plugins.min.css">
    <link rel="stylesheet" href="/static/css/components.min.css">
    <link href="/static/css/css/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/css/layout/css/themes/darkblue.min. css" rel="stylesheet" type="text/css" id="style_color" />
    <link href="/static/css/css/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
</head>
<body class="theme-white">
<div class="am-g tpl-g" id="form_wizard_1">
    <div class="portlet-body form">
        <form class="form-horizontal" action="#" id="submit_form" method="POST" novalidate="novalidate">
            <div class="form-wizard">
                <div class="form-body">
                    <ul class="nav nav-pills nav-justified steps">
                        <li class="active">
                            <a href="#tab1" data-toggle="tab" class="step" aria-expanded="true">
                                <span class="number"> 1 </span>
                                <span class="desc">
                                                                    <i class="fa fa-check"></i> 创建控制器 </span>
                            </a>
                        </li>
                        <li>
                            <a href="#tab2" data-toggle="tab" class="step">
                                <span class="number"> 2 </span>
                                <span class="desc">
                                                                    <i class="fa fa-check"></i> 创建模型 </span>
                            </a>
                        </li>
                        <li>
                            <a href="#tab3" data-toggle="tab" class="step active">
                                <span class="number"> 3 </span>
                                <span class="desc">
                                                                    <i class="fa fa-check"></i> 创建视图 </span>
                            </a>
                        </li>
                        <li>
                            <a href="#tab4" data-toggle="tab" class="step">
                                <span class="number"> 4 </span>
                                <span class="desc">
                                                                    <i class="fa fa-check"></i> 完成 </span>
                            </a>
                        </li>
                    </ul>
                    <div id="bar" class="progress progress-striped" role="progressbar">
                        <div class="progress-bar progress-bar-success" style="width: 25%;"></div>
                    </div>
                    <div class="tab-content">
                        <div class="alert alert-danger display-none">
                            <button class="close" data-dismiss="alert"></button>
                            You have some form errors. Please check below.
                        </div>
                        <div class="alert alert-success display-none">
                            <button class="close" data-dismiss="alert"></button>
                            Your form validation is successful!
                        </div>
                        <div class="tab-pane active" id="tab1">
                            <h3 class="block">费用单</h3>
                            <div class="form-group">
                                <label class="control-label col-md-3">费用
                                    <span class="required" aria-required="true"> * </span>
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="newCost">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">备注
                                </label>
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="newNote">
                                </div>
                            </div>
                            <script>
                                var id = $("#CostId").val();

                                if(id !== "") {
                                    $.ajax({
                                        type : 'GET',
                                        url : '/costJson/getone?Id=' + id,
                                        async : false,
                                        success : function(data) {

                                        }
                                    });
                                }

                            </script>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <a href="javascript:clicknext();" class="btn btn-outline green button-next"> Continue
                                <i class="fa fa-angle-right"></i>
                            </a>
                        </div>
                        <script>


                            function clicknext(){
                                var cost = $(" input[ name='newCost' ] ").val();
                                if(cost !== null){
                                    var note = $(" input[ name='newNote' ] ").val();
                                    /*$.post("/costs/cost_form", { newCost: cost, newNote: note } ,function(data,status){
                                        console.log(data);
                                        console.log(status);
                                    });*/
                                    event.stopImmediatePropagation();
                                    $.ajax({
                                        type: "POST",
                                        url: "/costs/cost_form",
                                        data: {newCost: cost, newNote: note },
                                        dataType: "json",
                                        success: function(data){
                                            console.log(data);
                                            if(data === true){
                                                console.log("1235");

                                                window.parent.location.reload();
                                                $.get("/costs")
                                            }
                                        }
                                    });
                                }
                            }
                        </script>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!--<script src="/static/js/amazeui.min.js"></script>-->
<!--<script src="/static/js/amazeui.datatables.min.js"></script>-->
<!--<script src="/static/js/dataTables.responsive.min.js"></script>-->
<!--[if lt IE 9]>
<script src="/static/css/css/plugins/respond.min.js"></script>
<script src="/static/css/css/plugins/excanvas.min.js"></script>
<script src="/static/css/css/plugins/ie8.fix.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="/static/css/css/plugins/jquery.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/static/css/css/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/css/css/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="/static/js/js/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="/static/js/js/form-wizard.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="/static/js/js/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="/static/js/js/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</body>
</html>
